/*
 * @Author: your name
 * @Date: 2021-08-10 15:37:53
 * @LastEditTime: 2021-08-19 17:25:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \code\cms_screen_frontend\cms_screen_frontend\src\pages\test\RightOneTopOne\index.tsx
 */
import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {observable} from "mobx";

interface IProps {
    slideTitle: string
}


@observer
class Home extends React.Component<IProps> {

    @observable
    public divWidth: number

    @observable
    public keyFrames: any

    constructor(props) {
        super(props);
        this.keyFrames = `@keyframes move{
    0%{
        left: 0;
    }
    100%{
        left: 0px;
    }
}`
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = this.keyFrames;
        document.head.appendChild(style);
    }

    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{}>, snapshot?: any) {
        // @ts-ignore
        this.divWidth = document.getElementById("title").offsetWidth
        const moveKeyframes = this.handleKeyframes('move');
        moveKeyframes.styleSheet.deleteRule(moveKeyframes.index);
        this.keyFrames = `@keyframes move{
    0%{
        left: 0;
    }
    100%{
        left: -${this.divWidth}px;
    }
}`
        moveKeyframes.styleSheet.insertRule(this.keyFrames, moveKeyframes.index);
    }

    public handleKeyframes = (name: string) => {
        const animation: any = {};
        // 获取所有的style
        const ss = document.styleSheets;
        for (let i = 0; i < ss.length; ++i) {
            const item = ss[i];
            // @ts-ignore
            if (item.cssRules[0] && item.cssRules[0].name && item.cssRules[0].name === name) {
                // @ts-ignore
                animation.cssRule = item.cssRules[0];
                animation.styleSheet = ss[i];
                animation.index = 0;
            }
        }
        return animation;
    }

    public componentWillUnmount() {
        this.divWidth = 0
    }

    public render() {
        const {slideTitle} = this.props
        return (
            <div className={styles.header}>
                <p className={styles.two} style={{animation: 'move linear 160s infinite'}}>
                    <span id='title'>
                        <span
                            style={{color: slideTitle.split('&')[0] === 'log-Critical' ? 'rgba(236,44,38,1)' : 'rgba(253,206,39,1)'}}
                            className={styles.one}>&nbsp;&nbsp;&nbsp;日志预警&nbsp;&nbsp;&nbsp;</span>
                        <span>{slideTitle ? slideTitle.split('&')[1].replace(/\$/g, '\xa0\xa0\xa0\xa0\xa0') : ''}</span>
                    </span>
                    {/* <span>
                        <span
                            style={{color: slideTitle.split('&')[0] === 'log-Critical' ? 'rgba(236,44,38,1)' : 'rgba(253,206,39,1)'}}
                            className={styles.one}>&nbsp;&nbsp;&nbsp;日志预警&nbsp;&nbsp;&nbsp;</span>
                        <span>{slideTitle ? slideTitle.split('&')[1].replace(/\$/g, '\xa0\xa0\xa0\xa0\xa0') : ''}</span>
                    </span> */}
                </p>
            </div>
        );
    }
}

export default Home;
